<template>
  <div>
    <div class="nav">
      <!-- <el-button type="primary"
                 plain
                 @click="handleDelBatch()">批量删除</el-button> -->
      <el-button type="primary" plain @click="handleAdd()"
        >添加课程
        <el-dialog
          title="添加课程的详细信息"
          v-model="dialogVisible"
          width="650px"
          @close="closeFun()"
          :before-close="handleClose"
        >
          <el-form
            :inline="true"
            :model="formData"
            :rules="addFormRules"
            class="demo-form-inline"
            label-width="80px"
          >
            <el-form-item
              class="el-form-item"
              label="课程名称"
              prop="courseName"
            >
              <el-input
                class="el-input"
                v-model="formData.courseName"
                placeholder="填写课程名称"
              ></el-input>
            </el-form-item>
            <el-form-item class="el-form-item" label="教师id" prop="teacherId">
              <el-input
                class="el-input"
                v-model="formData.teacherId"
                placeholder="填写教师id"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form
            :inline="true"
            :model="formData"
            :rules="addFormRules"
            class="demo-form-inline"
            label-width="80px"
          >
            <el-form-item
              class="el-form-item"
              style="padding-left: 20px"
              label="是否收费"
              prop="courseCharge"
            >
              <el-radio v-model="formData.courseCharge" label="1"
                >收费</el-radio
              >
              <el-radio v-model="formData.courseCharge" label="0"
                >免费</el-radio
              >
              <!-- <el-input
                class="el-input"
                v-model="formData.courseCharge"
                placeholder="收费填1，免费填0"
              ></el-input> -->
            </el-form-item>
            <el-form-item
              style="padding-left: 20px"
              class="el-form-item"
              label="课程标签"
              prop="courseTag"
            >
              <el-select v-model="formData.courseTag" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <!-- <el-input
                class="el-input"
                v-model="formData.courseTag"
                placeholder="请填写课程标签"
              ></el-input> -->
            </el-form-item>
          </el-form>
          <el-form
            :inline="true"
            :model="formData"
            :rules="addFormRules"
            class="demo-form-inline"
            label-width="80px"
          >
            <el-form-item class="el-form-item" label="年级" prop="courseGrade">
              <el-input
                class="el-input"
                v-model="formData.courseGrade"
                placeholder="请填写年级"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="el-form-item"
              label="课程介绍"
              prop="courseIntroduction"
            >
              <el-input
                class="el-input"
                v-model="formData.courseIntroduction"
                placeholder="请填写课程简介信息"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form
            :inline="true"
            :model="formData"
            :rules="addFormRules"
            class="demo-form-inline"
            label-width="80px"
          >
            <el-form-item class="el-form-item" label="课时" prop="lessonNum">
              <el-input
                class="el-input"
                v-model="formData.lessonNum"
                placeholder="请填写课时"
              ></el-input>
            </el-form-item>
            <el-form-item
              class="el-form-item"
              label="课程容量"
              prop="participantCount"
            >
              <el-input
                class="el-input"
                v-model="formData.participantCount"
                placeholder="请填写要参与课程的学生人数"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form
            :inline="true"
            :model="formData"
            class="demo-form-inline"
            label-width="80px"
          >
            <el-form-item
              class="el-form-item"
              label="课程封面URL"
              prop="courseImg"
            >
              <el-input
                class="el-input"
                v-model="formData.courseImg"
                placeholder="上传图片功能正在开发(可不填)"
              ></el-input>
            </el-form-item>
            <el-form-item class="el-form-item" label="课程介绍视频URL">
              <el-input
                class="el-input"
                v-model="formData.courseIntroVideo"
                placeholder="上传视频功能正在开发(可不填)"
              ></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
          </template>
        </el-dialog></el-button
      >
    </div>
    <div>
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="courseId" label="课程id" width="100">
        </el-table-column>
        <el-table-column prop="courseTag" label="类型"> </el-table-column>
        <el-table-column prop="courseImg" label="课程封面" width="120">
          <template #default="scope">
            <img :src="scope.row.courseImg" class="table-img" />
          </template>
        </el-table-column>
        <el-table-column prop="courseName" label="课程名称" width="120">
        </el-table-column>
        <el-table-column prop="teacherId" label="任课教师id" width="120">
        </el-table-column>
        <el-table-column prop="lessonNum" label="课时" width="80">
        </el-table-column>
        <el-table-column
          prop="participantCount"
          label="课程参与人数"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="" label="开课时间" width="120">
        </el-table-column>
        <el-table-column prop="courseIntroduction" label="课程介绍" width="300">
        </el-table-column>
        <el-table-column
          prop="courseIntroVideo"
          label="课程介绍视频"
          width="120"
        >
          <template #default="scope">
            <a
              v-if="scope.row.courseIntroVideo"
              :href="scope.row.courseIntroVideo"
              >点击跳转查看</a
            >
          </template>
        </el-table-column>
        <el-table-column prop="courseGrade" label="课程评分" width="80">
        </el-table-column>
        <el-table-column
          prop="courseCharge"
          :formatter="isChargeFormat"
          label="是否收费"
          width="80"
        >
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleNewCode(scope.$index, scope.row)"
              >生成激活码</el-button
            >
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- <div>
      <van-popup v-model:show="showAdd"
                 style="padding:30px;borderRadius:20px;;minWidth:300px;">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field v-model="formData.courseName"
                       name="courseName"
                       label="课程名称"
                       placeholder="填写课程名称"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.teacherId"
                       name="teacherId"
                       label="教师id"
                       placeholder="填写教师id"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.courseCharge"
                       name="courseCharge"
                       label="是否收费"
                       placeholder="收费填1，免费填0"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.courseTag"
                       name="courseTag"
                       label="课程标签"
                       placeholder="请填写课程标签"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.courseGrade"
                       name="courseGrade"
                       label="年级"
                       placeholder="请填写年级"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.courseIntroduction"
                       name="courseIntroduction"
                       label="课程介绍"
                       placeholder="请填写课程简介信息"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.lessonNum"
                       name="lessonNum"
                       label="课时"
                       placeholder="请填写课时"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.participantCount"
                       name="participantCount"
                       label="课程容量"
                       placeholder="请填写要参与课程的学生人数"
                       :rules="[{ required: true, message: '请填写' }]" />
            <van-field v-model="formData.courseImg"
                       name="courseImg"
                       label="课程封面URL"
                       placeholder="上传图片功能正在开发(可不填)" />
            <van-field v-model="formData.courseIntroVideo"
                       name="courseIntroVideo"
                       label="课程介绍视频URL"
                       placeholder="上传图片功能正在开发(可不填)" />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round
                        block
                        type="primary"
                        native-type="submit">
              确认添加
            </van-button>
          </div>
        </van-form>
      </van-popup>
    </div> -->
  </div>
</template>
<script>
import { ref, reactive, getCurrentInstance } from "vue";
import { Toast } from "vant";
export default {
  setup() {
    const dialogVisible = ref(false);
    const { proxy } = getCurrentInstance();
    const data = reactive({});
    const addFormRules = reactive({
      courseName: [{ required: true, message: "请填写", trigger: "blur" }],
      teacherId: [{ required: true, message: "请填写", trigger: "blur" }],
      courseCharge: [{ required: true, message: "请填写", trigger: "blur" }],
      courseTag: [{ required: true, message: "请填写", trigger: "blur" }],
      courseGrade: [{ required: true, message: "请填写", trigger: "blur" }],
      courseIntroduction: [
        { required: true, message: "请填写", trigger: "blur" },
      ],
      lessonNum: [{ required: true, message: "请填写", trigger: "blur" }],
      participantCount: [
        { required: true, message: "请填写", trigger: "blur" },
      ],
      courseImg: [{ required: true, message: "请填写", trigger: "blur" }],
      courseIntroVideo: [
        { required: true, message: "请填写", trigger: "blur" },
      ],
    });
    let formData = reactive({
      token: window.sessionStorage.getItem('token'),
      courseCharge: "",
      courseGrade: "",
      courseImg:
        "http://qz0561b4o.hn-bkt.clouddn.com/%E5%A4%AA%E7%A9%BA%E7%A7%91%E5%AD%A61.jpg",
      courseIntroVideo:
        "https://stem-src.oss-cn-shenzhen.aliyuncs.com/feelAir/kexue1.mp4",
      courseIntroduction: "",
      courseName: "",
      courseTag: "",
      lessonNum: "",
      participantCount: "",
      teacherId: "",
    });
    const options = reactive([
      {
        value: "自然科学",
        label: "自然科学",
      },
      {
        value: "社会科学",
        label: "社会科学",
      },
      {
        value: "人文科学",
        label: "人文科学",
      },
      {
        value: "生命科学",
        label: "生命科学",
      },
      {
        value: "其他",
        label: "其他",
      },
    ]);
    const showAddPopup = () => {
      showAdd.value = true;
    };
    const closeFun =()=>{
      console.log(formData);
      formData.courseCharge = ''
      formData.courseGrade = ''
      formData.courseIntroduction = ''
      formData.courseName = ''
      formData.courseTag = ''
      formData.lessonNum = ''
      formData.participantCount = ''
      formData.teacherId = ''

       
    }
    const cancel =()=>{
      dialogVisible.value = false
      // formData = reactive({  
      //   token: window.sessionStorage.getItem('token'),
      //   courseCharge: "1111",
      //   courseGrade: "",
      //   courseImg:
      //     "http://qz0561b4o.hn-bkt.clouddn.com/%E5%A4%AA%E7%A9%BA%E7%A7%91%E5%AD%A61.jpg",
      //   courseIntroVideo:
      //     "https://stem-src.oss-cn-shenzhen.aliyuncs.com/feelAir/kexue1.mp4",
      //   courseIntroduction: "",
      //   courseName: "",
      //   courseTag: "",
      //   lessonNum: "",
      //   participantCount: "",
      //   teacherId: "",
      // })
      // console.log(formData);
    }
    
    const onSubmit = (values) => {
      console.log(formData);
      console.log("submit");
      dialogVisible.value = false;
      proxy.$axios.course.postCourse(formData).then((res) => {
        if (res.status === 200) {
          Toast("添加成功");
          getList();
        } else {
          Toast("出错了");
        }
      });
    };
    function getList() {
      proxy.$axios.course
        .getAllCourse({ pageNo: 1, pageSize: 1000 })
        .then((res) => {
          if (res.status === 200) {
            console.log(res);
            proxy.list = res.data.data.records;
          }
        });
    }
    function handleAdd() {
      dialogVisible.value = true;
      // showAddPopup();
    }
    function isChargeFormat(row, column) {
      // 男0女1
      return JSON.parse(JSON.stringify(row)).courseCharge === 0
        ? "免费"
        : "付费";
    }
    return {
      closeFun,
      cancel,
      formData,
      options,
      addFormRules,
      onSubmit,
      dialogVisible,
      data,
      getList,
      handleAdd,
      showAddPopup,
      isChargeFormat,
    };
  },
  created() {
    this.getList();
  },
  data() {
    return {
      list: [],
      imgurl: "",
    };
  },
  methods: {
    // onSubmit(values) {
    //   console.log('submit');
    //   dialogVisible.value = false
    //   // this.$axios.course.postCourse(this.formData).then((res) => {
    //   //   if (res.status === 200) {
    //   //     Toast("添加成功");
    //   //     this.getList();
    //   //     this.showAdd = false;
    //   //   } else {
    //   //     Toast("出错了");
    //   //   }
    //   // });
    // },
    handleNewCode(index, row) {
      Toast("课程模块的功能正在开发中...");
      // this.$axios.course.getNewRedeem({ courseId: row.courseId, expireTime: '2022-12-12-12:12:14' }).then(res => {
      //   console.log(res)
      //   if (res.status === 200) {
      //     Toast('成功生成激活码')
      //     this.getList()
      //   } else {
      //     Toast('出错了')
      //   }
      // })
    },
    handleEdit(index, row) {
      // 右侧编辑
      Toast("课程模块的功能正在开发中...");
    },
    handleDelete(index, row) {
      // 右侧删除
      Toast("课程模块的功能正在开发中...");
    },
    handleDelBatch() {
      Toast("课程模块的功能正在开发中...");
    },
  },
};
</script>
<style lang="scss" scoped>
.nav {
  margin-top: $margin-mini;
  margin-left: $margin-mini;
}
// el-form-item {
//   padding: 10px 10px;
// }
</style>
